import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, InputNumber, Select, Switch, Button, message } from 'antd';
import { Parameter, ParameterCreate, ParameterUpdate } from '../../types';

const { Option } = Select;

interface ParameterFormProps {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (values: ParameterCreate | ParameterUpdate) => Promise<void>;
  initialValues?: Parameter;
  title: string;
}

const ParameterForm: React.FC<ParameterFormProps> = ({
  visible,
  onCancel,
  onSubmit,
  initialValues,
  title
}) => {
  const [form] = Form.useForm();
  const [isListParameter, setIsListParameter] = useState(false);
  const [isYearRelated, setIsYearRelated] = useState(false);
  const isEditing = !!initialValues;

  // 监听 initialValues 和 visible 的变化，重置表单
  useEffect(() => {
    if (visible) {
      if (initialValues) {
        // 编辑模式：设置表单值，确保 sort_order 有默认值
        const values = {
          ...initialValues,
          sort_order: initialValues.sort_order ?? 0
        };
        form.setFieldsValue(values);
        setIsListParameter(initialValues.is_list || false);
        setIsYearRelated(initialValues.is_year_related || false);
      } else {
        // 添加模式：清空表单，明确设置所有字段为空
        form.resetFields();
        form.setFieldsValue({
          name: '',
          name_en: '',
          param_type: undefined,
          unit: '',
          description: '',
          is_list: false,
          is_year_related: false,
          list_length: undefined,
          sort_order: 0
        });
        setIsListParameter(false);
        setIsYearRelated(false);
      }
    } else {
      // 对话框关闭时只重置状态变量，不操作 form（因为 Form 组件可能已卸载）
      setIsListParameter(false);
      setIsYearRelated(false);
    }
  }, [visible, initialValues, form]);

  // 监听is_list字段变化，自动设置is_year_related
  const handleIsListChange = (checked: boolean) => {
    setIsListParameter(checked);
    if (checked) {
      // 如果是列表参数，默认关联年份
      form.setFieldsValue({ is_year_related: true, list_length: undefined });
      setIsYearRelated(true);
    } else {
      // 如果不是列表参数，自动关闭年份关联
      form.setFieldsValue({ is_year_related: false, list_length: undefined });
      setIsYearRelated(false);
    }
  };

  // 监听is_year_related字段变化
  const handleIsYearRelatedChange = (checked: boolean) => {
    setIsYearRelated(checked);
    if (checked) {
      // 如果选择了年份关联，清空列表长度
      form.setFieldsValue({ list_length: undefined });
    }
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      // 设置默认的 sort_order
      if (values.sort_order === undefined || values.sort_order === null) {
        values.sort_order = 0;
      }
      await onSubmit(values);
      form.resetFields();
      message.success(initialValues ? '参数更新成功' : '参数创建成功');
    } catch (error: any) {
      console.error('Form validation failed:', error);
      
      // 如果是 API 错误，显示后端返回的具体错误信息
      if (error?.response?.data?.detail) {
        message.error(error.response.data.detail);
      } else if (error?.message) {
        message.error(error.message);
      } else {
        message.error(initialValues ? '参数更新失败' : '参数创建失败');
      }
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  const paramTypeOptions = [
    { value: 'integer', label: '整数' },
    { value: 'float', label: '浮点数' },
    { value: 'boolean', label: '布尔值' },
    { value: 'string', label: '字符串' }
  ];

  return (
    <Modal
      title={title}
      open={visible}
      onCancel={handleCancel}
      onOk={handleSubmit}
      okText="确定"
      cancelText="取消"
      width={600}
      destroyOnHidden
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={initialValues ? { ...initialValues, sort_order: initialValues.sort_order ?? 0 } : { sort_order: 0 }}
        requiredMark={false}
      >
        <Form.Item
          name="name"
          label="参数中文名称"
          rules={[
            { required: true, message: '请输入参数中文名称' },
            { max: 100, message: '参数名称不能超过100个字符' }
          ]}
        >
          <Input placeholder="请输入参数中文名称" />
        </Form.Item>

        <Form.Item
          name="name_en"
          label="参数英文名称"
          rules={[
            { required: true, message: '请输入参数英文名称' },
            { max: 100, message: '参数英文名称不能超过100个字符' },
            { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: '英文名称必须符合Python变量名规则：只能包含字母、数字和下划线，且不能以数字开头' }
          ]}
        >
          <Input placeholder="请输入参数英文名称" />
        </Form.Item>

        <Form.Item
          name="param_type"
          label="参数类型"
          rules={[
            { required: true, message: '请选择参数类型' }
          ]}
          extra={isEditing ? "编辑模式下不允许修改参数类型，以避免数据不匹配" : undefined}
        >
          <Select 
            placeholder="请选择参数类型"
            disabled={isEditing}
          >
            {paramTypeOptions.map(option => (
              <Option key={option.value} value={option.value}>
                {option.label}
              </Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          name="unit"
          label="参数单位"
          rules={[
            { max: 50, message: '参数单位不能超过50个字符' }
          ]}
        >
          <Input placeholder="请输入参数单位（可选）" />
        </Form.Item>

        <Form.Item label="参数类型">
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ flex: 1 }}>
              <Form.Item
                name="is_list"
                label="是否为列表参数"
                valuePropName="checked"
                extra={isEditing ? "编辑模式下不允许修改列表属性，以避免数据不匹配" : undefined}
                style={{ marginBottom: 0 }}
              >
                <Switch disabled={isEditing} onChange={handleIsListChange} />
              </Form.Item>
            </div>
            {isListParameter && (
              <div style={{ flex: 1 }}>
                <Form.Item
                  name="is_year_related"
                  label="是否关联年份"
                  valuePropName="checked"
                  extra={isEditing ? "编辑模式下不允许修改年份关联属性，以避免数据不匹配" : undefined}
                  style={{ marginBottom: 0 }}
                >
                  <Switch 
                    disabled={isEditing}
                    onChange={handleIsYearRelatedChange}
                  />
                </Form.Item>
              </div>
            )}
          </div>
        </Form.Item>

        {/* 列表长度输入 - 仅在非年份关联的列表参数时显示 */}
        {isListParameter && !isYearRelated && (
          <Form.Item
            name="list_length"
            label="列表长度"
            rules={[
              { type: 'number', min: 1, message: '列表长度必须大于0' },
              { type: 'number', max: 1000, message: '列表长度不能超过1000' }
            ]}
            extra={isEditing ? "编辑模式下不允许修改列表长度，以避免数据不匹配" : "设置列表的长度，输入参数值时会自动创建对应数量的输入框"}
          >
            <InputNumber 
              placeholder="请输入列表长度" 
              min={1}
              max={1000}
              disabled={isEditing}
              style={{ width: '100%' }}
            />
          </Form.Item>
        )}

        <Form.Item
          name="description"
          label="参数描述"
          rules={[
            { max: 500, message: '参数描述不能超过500个字符' }
          ]}
        >
          <Input.TextArea 
            placeholder="请输入参数描述（可选）" 
            rows={4}
            showCount
            maxLength={500}
          />
        </Form.Item>

        <Form.Item
          name="sort_order"
          label="排序顺序"
          initialValue={0}
          rules={[
            { type: 'number', min: 0, message: '排序顺序必须大于等于0' }
          ]}
        >
          <InputNumber 
            placeholder="数字越大越靠前，默认为0" 
            min={0}
            max={9999}
            style={{ width: '100%' }}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ParameterForm;
